<template>
    <div id="Group">
        <mt-field label="牌桌号" placeholder="牌桌号" state="warning" v-model="tableId"></mt-field>
        <div @click="open">
            <mt-field label="起始时间" :readonly="true" placeholder="点击选择时间" state="warning" v-model.trim="startTime"></mt-field>
        </div>
        <div @click="open2">
            <mt-field label="结束时间" :readonly="true" placeholder="点击选择时间" state="warning" v-model.trim="endTime"></mt-field>
        </div>
        <div style="margin:10px 10px">
            <mt-button type="primary" size="large" @click.native="search">查找</mt-button>
        </div>
        <div class="showResult lay">
            <div class="showResultTitle">
                查询结果
            </div>
            <div class="contentResult">
                <qin-you-view @click.native="toPath(item.ID)" :key="index" v-for="(item,index) in group.arr">
                    <img :src="item.szHeadPicUrl" slot="icon">
                    <div slot="content">
                        <p>牌桌号 : <span class="time">{{item.TableID}}</span></p>
                        <p>钻石消耗 : <span class="time">{{item.Cost}}</span></p>
                        <p>开房人昵称 : <span class="time">{{item.CreateName}}</span></p>
                        <p>游戏人数 : <span class="time">{{item.gameNum}}</span></p>
                        <p>开房时间 : <span class="success">{{item.CreateTime}}</span></p>
                    </div>
                    <router-link to="#" slot="to"> > </router-link>
                </qin-you-view>
                <div v-if=" group.arr.length==0">
                    无符合条件的数据
                </div>
                <div v-if=" group.arr.length>0">
                    <div style="margin:10px 10px">
                        <mt-button type="primary" size="large" @click.native="loadMore" v-if=" group.nextPage< group.totalPages">加载更多</mt-button>
                        <mt-button type="default" size="large" v-else>已无更多数据</mt-button>
                    </div>
                </div>
            </div>
        </div>
        <mt-datetime-picker ref="picker" type="date" :startDate="startDate" :endDate="endDate" year-format="{value}年" month-format="{value}月" date-format="{value}日" v-model="starttime" @confirm="handleConfirmS">
        </mt-datetime-picker>
        <mt-datetime-picker ref="pickerend" type="date" :startDate="startDate" :endDate="endDate" year-format="{value}年" month-format="{value}月" date-format="{value}日" v-model="endtime" @confirm="handleConfirmE">
        </mt-datetime-picker>
        <mt-popup v-model="popupVisible" position="top" :modal="false" pop-transition="popup-fade">
            {{msg}}
        </mt-popup>
    </div>
</template>
<script>
    import {
        MessageBox
    } from "mint-ui"
    import QinYouView from '../../../components/QinyouView/QinYouView'
    export default {
        name: "group",
        components: {
            QinYouView
        },
        data() {
            return {
                startTime: "",
                endTime: "",
                tableId: "",
                startDate: new Date('2017-01-01'), //时间选择器最小的时间
                endDate: new Date(), //时间选择器最大时间
                popupVisible: false,
                starttime: 0,
                endtime: 0,
                msg: "",
                group: {
                    arr: [],
                    totalCount: 0,
                    nextPage: 0,
                    totalPages: 0
                }
            }
        },
        methods: {
            open() {
                this.$refs.picker.open();
            },
            open2() {
                this.$refs.pickerend.open();
            },
            handleConfirmS(time) {
                this.starttime = time;
                this.startTime = this.formateTimeObj(time) + " 00:00:00";
            },
            handleConfirmE(time) {
                this.endtime = time;
                this.endTime = this.formateTimeObj(time) + " 23:59:59";
            },
            formateTimeObj: function(obj) {
                let Y = obj.getFullYear();
                let M = obj.getMonth() + 1;
                let D = obj.getDate();
                if (M < 10) {
                    M = "0" + M;
                }
                if (D < 10) {
                    D = "0" + D;
                }
                return `${Y}-${M}-${D}`;
            },
            loadMore() {
                let getData = {
                    params: {
                        'functionname': "GetQYExploitsList",
                        body: JSON.stringify({
                            startDate: this.startTime,
                            endDate: this.endTime,
                            pageIndex: this.group.nextPage,
                            pageSize: this.PAGESIZE,
                            TableID: parseInt(this.tableId == "" ? 0 : this.tableId)
                        })
                    }
                }
                //  console.log(getData);
                this.getList(getData);
            },
            getList: function(getData) {
                this.$http.get(`${this.baseUrl}/Main/GetData`, getData).then(response => {
                    let data = response.data;
                    let arr = data.body;
                    if (data.code == 1) {
                        for (let item = 0; item < arr.length; item++) {
                            let value = arr[item];
                            let i = 1;
                            let gameNum = 0;
                            while (i < 9) {
                                if (value[`UserID${i}`] != 0) {
                                    gameNum++;
                                }
                                arr[item]['gameNum'] = gameNum;
                                i++;
                            }
                        }
                        if (this.group.totalCount == 0) {
                            this.group.nextPage = 1;
                            this.group.arr = arr;
                        } else if (this.group.totalCount > 0) {
                            this.group.arr = this.group.arr.concat(arr);
                            this.group.nextPage = this.group.nextPage + 1;
                        }
                        this.group.totalPages = Math.ceil(data.totalCount / this.PAGESIZE);
                        this.group.totalCount = data.totalCount;
                    } else {
                        MessageBox("提示", data.msg)
                    }
                })
            },
            search() {
                // if (this.startTime == "") {
                //     MessageBox("提示", "起始时间不能为空");
                //     return false;
                // }
                // if (this.endTime == "") {
                //     MessageBox("提示", "结束时间不能为空");
                //     return false;
                // }
                this.group.totalCount = 0;
                this.group.nextPage = 0;
                let getData = {
                    params: {
                        'functionname': "GetQYExploitsList",
                        body: JSON.stringify({
                            startDate: this.startTime,
                            endDate: this.endTime,
                            pageIndex: this.group.nextPage,
                            pageSize: this.PAGESIZE,
                            TableID: parseInt(this.tableId == "" ? 0 : this.tableId)
                        })
                    }
                }
                //  console.log(getData);
                this.getList(getData)
            },
            initView() {
                let getData = {
                    params: {
                        'functionname': "GetQYExploitsList",
                        body: JSON.stringify({
                            startDate: "",
                            endDate: "",
                            pageIndex: this.group.nextPage,
                            pageSize: this.PAGESIZE,
                            TableID: 0
                        })
                    }
                }
                // console.log(getData);
                this.getList(getData)
            },
            toPath(pathID) {
                this.$router.push({
                    path: `/check/detail/${pathID}`
                })
            }
        },
        mounted() {},
        created() {
            this.initView()
        }
    }
</script>